<template>
    <el-upload
        v-if="!props.modelValue"
        action="none"
        accept=".jpg,.jpeg,.png,.JPG,.JPEG"
        :show-file-list="false"
        :on-change="beforeAvatarUpload"
        :auto-upload="false"
        :disabled="type == 'look'">
        <div class="btn_box" :class="{ disabled__upload: type == 'look' }">
            <div class="icon">
                <el-icon>
                    <Plus />
                </el-icon>
            </div>
            <div class="text">点击上传</div>
        </div>
    </el-upload>
    <div v-else class="upload-file-box" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <el-image style="width: 100%; height: 100%" :src="props.modelValue" fit="cover" />
        <div v-show="type != 'look'" class="hover-img">
            <el-icon v-if="isShow" class="del" :style="{ fontSize: '22px' }" @click="delFile">
                <Delete />
            </el-icon>
        </div>
    </div>
    <div class="upload-file-text">图片支持JPG、PNG、JPEG格式，大小2M以内，建议宽高比为1：1，尺寸200px*200px。</div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed, isShallow } from 'vue';
import { useRoute } from 'vue-router';
import { ElForm, ElMessage, ElMessageBox, UploadProps, FormRules } from 'element-plus';
import { uploadFile2 } from '@/api/common';
import Dialog from '@/components/Dialog.vue';
import selectStoreType from './selectStoreType.vue';

const routers = useRoute();
const { type } = routers.query;

const size = ref<number>(30);

interface Props {
    modelValue: string;
}
const showColor = ref(false);
const isShow = ref(false);
const mouseOver = () => {
    isShow.value = true;
};
const mouseLeave = () => {
    isShow.value = false;
};
const props = withDefaults(defineProps<Props>(), {
    modelValue: ''
});
const emit = defineEmits(['update:modelValue']);

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any, key: string) => {
    if (!rawFile) {
        return;
    }
    const types = ['.jpg', '.jpeg', '.png', '.JPG', '.JPEG', '.PNG'];
    if (!types.includes(rawFile.name.substring(rawFile.name.lastIndexOf('.')))) {
        ElMessage.error('图片格式不正确！');
        return false;
    }
    if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('上传图片大小不能超过2M');
        return false;
    }
    uploadFun(rawFile.raw, rawFile.name, key);
};

const uploadFun = (file: any, fileName: string, key: string) => {
    uploadFile2({
        file,
        fileName
    }).then((r: any) => {
        const { url } = r;
        emit('update:modelValue', url);
    });
};

const delFile = () => {
    emit('update:modelValue', '');
};
</script>
<style scoped lang="scss">
.disabled__upload {
    cursor: not-allowed;
}

.btn_box {
    width: 110px;
    height: 110px;
    border-radius: 3px;
    border: 1px dashed #c0ccda;
    background: #fbfdff;
    color: #ff6b00;
    text-align: center;

    .icon {
        transform: translateY(13px);
        font-size: 22px;
        font-weight: 700;
    }

    .text {
        transform: translateY(30px);
    }

    &:hover {
        border: 1px dashed #ff6b00;
    }
}

.upload-file-box {
    width: 110px;
    height: 110px;
    position: relative;

    .hover-img {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .del {
            color: #fff;

            &:hover {
                cursor: pointer;
            }
        }
    }

    .hover-img:hover {
        background-color: rgb(0 0 0 / 60%);
        opacity: 1;
    }
}

.upload-file-text {
    margin-top: 10px;
    line-height: 1.4;
    font-size: 12px;
    color: #999;
}
</style>
